import { computed } from 'vue'
import oui from '../oui'

import {
  NAffix,
  NAlert,
  NAnchor,
  NAnchorLink,
  NAutoComplete,
  NAvatar,
  NAvatarGroup,
  NBackTop,
  NBadge,
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NxButton,
  NButtonGroup,
  NCard,
  NCascader,
  NCheckbox,
  NCheckboxGroup,
  NCollapse,
  NCollapseItem,
  NCollapseTransition,
  NConfigProvider,
  NDataTable,
  NDatePicker,
  NDescriptions,
  NDescriptionsItem,
  NDialog,
  NDivider,
  NDrawer,
  NDrawerContent,
  NDropdown,
  NDynamicTags,
  NElement,
  NEl,
  NEllipsis,
  NForm,
  NFormItem,
  NFormItemGridItem,
  NFormItemGi,
  NFormItemCol,
  NFormItemRow,
  NGlobalStyle,
  NGrid,
  NGridItem,
  NGi,
  NH1,
  NH2,
  NH3,
  NH4,
  NH5,
  NH6,
  NA,
  NP,
  NBlockquote,
  NHr,
  NUl,
  NOl,
  NLi,
  NText,
  NIcon,
  NIconWrapper,
  NInput,
  NInputGroup,
  NInputGroupLabel,
  NInputNumber,
  NLayout,
  NLayoutContent,
  NLayoutHeader,
  NLayoutFooter,
  NLayoutSider,
  NList,
  NListItem,
  NMenu,
  NModal,
  NPagination,
  NPopconfirm,
  NPopover,
  NPopselect,
  NProgress,
  NRadio,
  NRadioGroup,
  NRadioButton,
  NScrollbar,
  NSelect,
  NSlider,
  NSpace,
  NSpin,
  NStatistic,
  NSteps,
  NStep,
  NSwitch,
  NTable,
  NTh,
  NTr,
  NTd,
  NThead,
  NTbody,
  NTabs,
  NTabPane,
  NTab,
  NTag,
  NTime,
  NTimePicker,
  NTooltip,
  NUpload,
  NUploadDragger,
  NUploadTrigger,
  NUploadFileList,
  create,
  darkTheme,
  zhCN,
  zhTW,
  dateZhCN,
  dateZhTW,
  jaJP,
  dateJaJP,
  createDiscreteApi
} from 'naive-ui'

const naive = create({
  components: [
    NAffix,
    NAlert,
    NAnchor,
    NAnchorLink,
    NAutoComplete,
    NAvatar,
    NAvatarGroup,
    NBackTop,
    NBadge,
    NBreadcrumb,
    NBreadcrumbItem,
    NButton,
    NxButton,
    NButtonGroup,
    NCard,
    NCascader,
    NCheckbox,
    NCheckboxGroup,
    NCollapse,
    NCollapseItem,
    NCollapseTransition,
    NConfigProvider,
    NDataTable,
    NDatePicker,
    NDescriptions,
    NDescriptionsItem,
    NDialog,
    NDivider,
    NDrawer,
    NDrawerContent,
    NDropdown,
    NDynamicTags,
    NElement,
    NEl,
    NEllipsis,
    NForm,
    NFormItem,
    NFormItemGridItem,
    NFormItemGi,
    NFormItemCol,
    NFormItemRow,
    NGlobalStyle,
    NGrid,
    NGridItem,
    NGi,
    NH1,
    NH2,
    NH3,
    NH4,
    NH5,
    NH6,
    NA,
    NP,
    NBlockquote,
    NHr,
    NUl,
    NOl,
    NLi,
    NText,
    NIcon,
    NIconWrapper,
    NInput,
    NInputGroup,
    NInputGroupLabel,
    NInputNumber,
    NLayout,
    NLayoutContent,
    NLayoutHeader,
    NLayoutFooter,
    NLayoutSider,
    NList,
    NListItem,
    NMenu,
    NModal,
    NPagination,
    NPopconfirm,
    NPopover,
    NPopselect,
    NProgress,
    NRadio,
    NRadioGroup,
    NRadioButton,
    NScrollbar,
    NSelect,
    NSlider,
    NSpace,
    NSpin,
    NStatistic,
    NSteps,
    NStep,
    NSwitch,
    NTable,
    NTh,
    NTr,
    NTd,
    NThead,
    NTbody,
    NTabs,
    NTabPane,
    NTab,
    NTag,
    NTime,
    NTimePicker,
    NTooltip,
    NUpload,
    NUploadDragger,
    NUploadTrigger,
    NUploadFileList
  ]
})

const locales = {
  'zh-CN': [zhCN, dateZhCN],
  'zh-TW': [zhTW, dateZhTW],
  'ja-JP': [jaJP, dateJaJP]
}

export const theme = computed(() => oui.state.theme === 'light' ? undefined : darkTheme)

function globalLocale() {
  if (oui.state.locale === 'auto')
    return navigator.language
  else
    return oui.state.locale
}

export const locale = computed(() => locales[globalLocale()]?.[0])
export const dateLocale = computed(() => locales[globalLocale()]?.[1])

const { message, notification, dialog, loadingBar, app } = createDiscreteApi(
  ['message', 'dialog', 'notification', 'loadingBar'],
  {
    configProviderProps: computed(() => ({
      theme: theme.value,
      locale: locale.value,
      dateLocale: dateLocale.value
    }))
  }
)

app.use(naive)

export default {
  install(app) {
    app.config.globalProperties.$message = message
    app.config.globalProperties.$notification = notification
    app.config.globalProperties.$dialog = dialog
    app.config.globalProperties.$loadingBar = loadingBar
    app.use(naive)
  }
}
